import React, { useEffect, useState } from 'react'
import { Card, Form, Input, Button, Select, Table, Row, Col,message } from 'antd'
// 引入小图标
import { SearchOutlined } from "@ant-design/icons"
// 引入列表数据请求的api
import {
  getHosListRequest,
  getHosProvinceRequest,
  getHosCityRequest,
  changeStatusRequest
} from '@/api/hospital/hospitalList'
// 引入数据类型type
import type {
  getHosListSearchParamsType,
  hospitalListContentType,
  hospitalListItemsType,
  getProvinceReturnType
} from '@/api/hospital/model/hospitalListType'
import { useNavigate } from 'react-router-dom'


export default function HospitalList() {
  const navigate = useNavigate()
  const [form] = Form.useForm();
  // 1.定义表格当前的加载状态
  const [isLoading, setIsLoading] = useState(false)
  // 2.定义当前页码的状态
  const [page, setPage] = useState(1)
  // 3.定义每页显示数据条数
  const [limit, setLimt] = useState(3)
  // 4.设置医院数据总数据量,初始值为0,具体数据需要等获取请求的结果之后才能设置
  const [total, setTotal] = useState(0)
  // 5.定义查询时用户输入的表单参数
  const [searchParams, setSearchParams] = useState<getHosListSearchParamsType>({})
  // 6.定义表格数据的状态
  const [hosList, sethosList] = useState<hospitalListContentType>([])
  // 7.定义省份的状态,给数据设置获取的省份结果
  const [province, setProvince] = useState<getProvinceReturnType>([])
  // 8.定义城市数据的状态
  const [citylist, setCityList] = useState<getProvinceReturnType>([])
  // 9.定义区县数据的状态
  const [district, setDistrictList] = useState<getProvinceReturnType>([])
  //10.设置医院类型数据的状态
  const [hospitalType, setHospitalType] = useState<getProvinceReturnType>([])
  // 控制重新渲染的State状态
  const [rerender,setReRender]=useState(false)



  // 一.设置加载组件的时候,发起请求获取列表数据
  useEffect(() => {
    // 请求开始的时候设置为ture
    setIsLoading(true)
    // useEffect第一个参数不能是异步的,所以外面包裹一个函数,在下面调用即可
    const getHosList = async () => {
      const result = await getHosListRequest(page, limit, searchParams)
      // 这里是打印的结果
      // console.log(result);
      // console.log(result.content);
      // 将我们要的数据设置在列表上
      sethosList(result.content)
      //把结果中的医院总数设置给状态state
      setTotal(result.totalElements)

      // 请求结束的时候设置false
      setIsLoading(false)
    }
    getHosList()
    // 监听State状态,发生改变时,重新渲染页面
  }, [page, limit, searchParams, hospitalType,rerender])

  // 二.加载组件时,获取省份数据的设置
  useEffect(() => {
    const getProvniceHandle = async () => {
      // 这里获取的就是省份数据
      const result = await getHosProvinceRequest()
      // console.log(result);
      // 将获取的结果直接给省份状态设置上
      setProvince(result)
    }
    getProvniceHandle()
  }, [])

  // 三.加载组件时,获取医院类型数据的设置
  useEffect(() => {
    const getHOsTypeHandle = async () => {
      const result = await getHosCityRequest('10000')
      // console.log(result);
      setHospitalType(result)
    }
    getHOsTypeHandle()
  }, [])


  //事件回调函数
  // 1.点击页码渲染当前页数据的事件函数
  // 触发事件时,设置页码以及当前页码数据,进行渲染
  const getHosListHandle = (page: number, limit: number) => {
    // 设置页码也当前页码数据
    setPage(page)
    setLimt(limit)
  }

  // 2.省份数据发生变化时,执行省份数据onChange的回调函数,发送获取数据请求
  const getHosProvinceChangeHandle = async (value: string) => {
    // 根据点击的省份数据的value值,请求相应的市区数据
    const result = await getHosCityRequest(value)
    // console.log(result);
    // 将获取的结果直接给市区状态设置上
    setCityList(result)
    // 使用antd中的form属性,创建的实例身上的setFieldsValue属性,可以在状态改变之后清空下级表单的数据
    //选择完省份的时候,把市和区目前的value清除掉
    form.setFieldsValue({ cityCode: null, districtCode: null })
    //清空县的数据
    setDistrictList([])
  }

  // 3.市级数据发生变化时,执行市区的onChange回调函数,发送获取数据请求
  const getHosCityChangeHandle = async (value: string) => {
    const result = await getHosCityRequest(value)
    setDistrictList(result)
    // //选择完省份的时候,把市和区目前的value清除掉
    form.setFieldsValue({ districtCode: null })
  }

  // 4.查询表单的提交事件函数,form表单有一个onFinish事件,当该状态改变时,将value值设置给
  // setSearchParams的状态,上面useEffect已经监控了searchParams参数状态,发生变化时,从新执行回调
  // 回调参数就是输入框的value值,然后获取最新数据并渲染
  const finishHandle = (value: getHosListSearchParamsType) => {
    setSearchParams(value)
  }

  // 5.点击查询列表的清空按钮,执行请求api,获取新数据,从新渲染页面,
  const clearSearchHandle = () => {
    // 点击清空按钮之后,输入框的数据清空,状态改变,searchParams表单参数为空,再次发起请求,从新获取数据
    setSearchParams({})
  }

  // 6.点击查看,路由跳转医院详情页
  // 这里收到了点击事件传过来的参数id,然后在路由跳转的时候,通过params传参的形式
  // 传到医院展示的详情界面
  const hospitalDetailHandle = (id: string) => {
    return () => {
      navigate(`/syt/hospital/hospitalShow/${id}`)
    }
  }

  // 7.点击上下线的事件回调函数,并传入id参数,以及要修改的状态
  const changeStateHandle = (id:string,status:0|1) => {
    return async ()=>{
      // 传入参数
      await changeStatusRequest(id,status)
      // 修改状态,方便useEffect重新渲染
      setReRender(!rerender)
      message.success('状态更新成功')
    }
  }

  // 表格的字段
  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      //如果没有dataIndex设置,则render中拿到的数据就是当前完整的数据
      /* render(_: any, data: any) {
        return (
          <img width={100} src={`data:image/jpeg;base64,${data.logoData}`} alt="" />
        )
      } */
      // 如果设置了dataIndex,那么render中拿到的就是本条数据
      dataIndex: 'logoData',
      width: 130,
      render(logoData: string) {
        return (
          <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
        )
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      render(_: any, data: hospitalListItemsType) {
        return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      render(_: any, data: hospitalListItemsType) {
        return data.param.fullAddress
      }
    },
    {
      title: '状态',
      render(_: any, data: hospitalListItemsType) {
        return data.status === 0 ? '下线' : '上线'
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      render(_: any, data: hospitalListItemsType) {
        return (
          <div>
            {/* 这里点击查看按钮,触发事件函数,并将点击的这个查看按钮的id值进行传参 */}
            <Button type='primary' onClick={hospitalDetailHandle(data.id)}>查看</Button>
            <Button type='primary' onClick={()=>{navigate(`/syt/hospital/hospitlSchedule/${data.hoscode}`)}}>排班</Button>
            {/* 这个点击事件,我们要传两个参数,第一个就是点击的那个id,第二个就是我们要修改的状态,如果状态为0,就传1,如果为1就传0 */}
            <Button type='primary' onClick={changeStateHandle(data.id,data.status === 0 ? 1 : 0)}>
              {data.status === 0 ? '上线' : '下线'}
            </Button>
          </div >
        )
      }
    }
  ];
  return (
    <div>
      <Card>
        <Form
          name="basic"
          form={form}
          onFinish={finishHandle}
        >
          <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                name="provinceCode">
                <Select
                  placeholder="请输入省份"
                  // 给省份数据绑定一个事件函数,状态变化时,调用市区数据获取的回调函数
                  onChange={getHosProvinceChangeHandle}
                >
                  {province.map(item => {
                    return (
                      <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    )
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="cityCode">
                <Select
                  placeholder="请输入市"
                  onChange={getHosCityChangeHandle}>
                  {citylist.map(item => {
                    return (
                      <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    )
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="districtCode">
                <Select
                  placeholder="请输入区/县">
                  {district.map(item => {
                    return (
                      <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    )
                  })}
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hosname">
                <Input placeholder='医院名称' />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hoscode">
                <Input placeholder='医院编号' />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name="hostype">
                <Select placeholder="医院类型">
                  {hospitalType.map(item => {
                    return (
                      <Select.Option value={item.value} key={item.id}>
                        {item.name}
                      </Select.Option>
                    )
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={10}>
            <Col span={4}>
              <Form.Item name="status">
                <Select placeholder="医院状态">
                  <Select.Option value={1}>上线</Select.Option>
                  <Select.Option value={0}>下线</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={2}>
              <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >
                  查询
                </Button>
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
                {/* 点击清空按钮,从新执行请求回调,渲染页面数据 */}
                <Button type="default" htmlType="reset" onClick={clearSearchHandle} >
                  清空
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>

        <Table
          columns={columns}
          dataSource={hosList}
          scroll={{ x: 1100 }}
          // 展示外边框
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          // 设置加载状态的效果
          loading={isLoading}
          // 页码配置项
          pagination={{
            //页码的配置：当前页码
            current: page,
            //总数据的数量
            total: total,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 10, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
            showTotal(total) {
              return `共${total}条数据`
            },
            // 设置页码onChange事件
            onChange: getHosListHandle
          }}
        />
      </Card>
    </div>
  )
}
